import { defineComponent, ref, watch, shallowReactive } from 'vue'
import * as echarts from 'echarts'
// 声明类型
const PropsType = {
  cdata: {
    type: Object,
    require: true
  }
} as const
// 定义主体
export default defineComponent({
    props: PropsType,
    setup(props) {
      // 定义 ref
      const chartRef = ref()
      // 配置项
      let options = shallowReactive({color:null,tooltip:null,toolbox:null,calculable:null,legend:null,series:null})
  
      // 监听
      watch(
        () => props.cdata,
        (val: any) => {
          options = {
            color:null,
            tooltip: {
                trigger: 'item'
              },
            toolbox:null,
            calculable:null,
            legend: {
              top:'bottom',
                left: 'center',
                width: '100%',
                pageIconSize: 0, // 分页图标大小设为 0，禁用分页图标
                pageTextStyle: {
                    opacity: 0 // 分页文字透明度设为 0，隐藏分页文字
                },
            },
            series: [
                {
                    name: '',
                    type: 'pie',
                    radius: ['60%','80%'],
                    avoidLabelOverlap: false,
                    label: {
                      show: false,
                      position: 'center',
                      formatter: '{b}: {d}%'
                    },
                    emphasis: {
                      label: {
                        show: true,
                        fontSize: 18,
                        fontWeight: 'bold',
                        color:'#fff'
                      }
                    },
                    labelLine: {
                      show: false
                    },
                data: val.seriesData
                }
              ]
          }
          // 手动触发更新
          if (chartRef.value) {
            // 通过初始化参数打入数据
            chartRef.value.initChart(options)
          }
        },
        {
          immediate: true,
          deep: true
        }
      )
  
      return () => {
        const height = "245px"
        const width = "400px"
        return <div>
          <echart ref={chartRef} height={height} width={width} />
        </div>
      }
    }
  })